<template>
	 <!-- :style="{ 'padding-top':pageTitle+'px' }" -->
	<view class='score'>
		<score-head></score-head>
		<view class='part one'>
			<view class='part_title dFlex jCenter_aCenter'>
				<view class='part_title_icon imgPublic'>
					<image src="/static/images/logo2@2x.png" mode="widthFix"></image>
				</view>
				<text>TOTO 4D</text>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>First Prize</view>
					<view class='price_title'>Second Prize</view>
					<view class='price_title'>Third Prize</view>
				</view>
				<view class='part_content_value threeValue dFlex jAround_aCenter'>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Special Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter fWap fiveValue'>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>-</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>-</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Consolation Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter fWap fiveValue'>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
				</view>
			</view>
		</view>
		<view class='part two'>
			<view class='part_title dFlex jCenter_aCenter'>
				<!-- <view class='part_title_icon imgPublic'>
					<image src="/static/images/wlogo@2x.png" mode="widthFix"></image>
				</view> -->
				<text>TOTO 4D JACKPOT</text>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Winning Numbers</view>
				</view>
				<view class='part_content_value threeValue dFlex jAround_aCenter fWap'>
					<view class='price_value'>4509 + 1285</view>
					<view class='price_value'>4509 + 1285</view>
					<view class='price_value'>4509 + 1285</view>
					<view class='price_value'>4509 + 1285</view>
					<view class='price_value'>4509 + 1285</view>
					<view class='price_value'>4509 + 1285</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Jackpot 1</view>
				</view>
				<view class='part_content_value dFlex jCenter_aCenter'>
					<view class='price_value'>RM16.386,342,10</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Jackpot 2</view>
				</view>
				<view class='part_content_value dFlex jCenter_aCenter'>
					<view class='price_value'>RM16.386,342,10</view>
				</view>
			</view>
		</view>
		<view class='part five'>
			<view class='part_title dFlex jCenter_aCenter'>
				<text>TOTO 4D ZODIAC</text>
			</view>
			<view class='part_content dFlex jBetween_aCenter' style="align-items: stretch;">
				<view class='gradeList'>
					<view class='grade'>1st Prize</view>
					<view class='grade'>2nd Prize</view>
					<view class='grade'>3rd Prize</view>
					<view class='grade'>4th Prize</view>
					<view class='grade'>5th Prize</view>
					<view class='grade'>6th Prize</view>
				</view>
				<view class='score'>
					<view class="scoreList dFlex jBetween_aCenter" style="align-items: stretch;">
						<view class="scoreItemList">
							<view class="scoreItem">4509</view>
							<view class="scoreItem">4509</view>
							<view class="scoreItem">4509</view>
							<view class="scoreItem">4509</view>
							<view class="scoreItem">4509</view>
						</view>
						<view class="plus dFlex jCenter_aCenter">+</view>
						<view class="scoreIcon imgPublic dFlex jCenter_aCenter">
							<image src="/static/images/dog@2x.png" mode="widthFix"></image>
						</view>
					</view>
					<view class='allScore'>4509</view>
				</view>
			</view>
		</view>
		<view class='part three'>
			<view class='part_title dFlex jCenter_aCenter'>
				<!-- <view class='part_title_icon imgPublic'>
					<image src="/static/images/wlogo@2x.png" mode="widthFix"></image>
				</view> -->
				<text>SUPREME TOTO 6/58</text>
			</view>
			<view class='part_content'>
				<!-- <view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>Winning Numbers</view>
				</view> -->
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_count'>1</view>
					<view class='price_value_count'>1</view>
					<view class='price_value_count'>1</view>
					<view class='price_value_count'>1</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Jackpot</view>
				</view>
				<view class='part_content_value'>
					<view class='price_value'>RM1,000 Every Day</view>
				</view>
			</view>
		</view>
		<view class='part three'>
			<view class='part_title dFlex jCenter_aCenter'>
				<!-- <view class='part_title_icon imgPublic'>
					<image src="/static/images/wlogo@2x.png" mode="widthFix"></image>
				</view> -->
				<text>SUPREME TOTO 6/50</text>
			</view>
			<view class='part_content'>
				<!-- <view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>Winning Numbers</view>
				</view> -->
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_count'>1</view>
					<view class='price_value_count'>1</view>
					<view class='price_value_count'>1</view>
					<view class='price_value_count'>1</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Jackpot1</view>
				</view>
				<view class='part_content_value'>
					<view class='price_value'>RM1,000 Every Day</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Jackpot2</view>
				</view>
				<view class='part_content_value'>
					<view class='price_value'>RM1,000 Every Day</view>
				</view>
			</view>
		</view>
		<view class='part four'>
			<view class='part_title dFlex jCenter_aCenter'>
				<!-- <view class='part_title_icon imgPublic'>
					<image src="/static/images/wlogo@2x.png" mode="widthFix"></image>
				</view> -->
				<text>TOTO 5D</text>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>1st Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count'>1</text>
						<text class='group_count'>2</text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
					</view>
					<!-- <text class='or'>Or</text> -->
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>2st Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count'>1</text>
						<text class='group_count'>2</text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
					</view>
					<!-- <text class='or'>Or</text> -->
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>3st Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count'>1</text>
						<text class='group_count'>2</text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
					</view>
					<!-- <text class='or'>Or</text> -->
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>4st Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count empty_count'></text>
						<text class='group_count'>2</text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
					</view>
					<!-- <text class='or'>Or</text> -->
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>5st Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
					</view>
					<!-- <text class='or'>Or</text> -->
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>6st Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
					</view>
					<!-- <text class='or'>Or</text> -->
				</view>
			</view>
		</view>
		<view class='part four'>
			<view class='part_title dFlex jCenter_aCenter'>
				<!-- <view class='part_title_icon imgPublic'>
					<image src="/static/images/wlogo@2x.png" mode="widthFix"></image>
				</view> -->
				<text>TOTO 6D</text>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>1st Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count'>1</text>
						<text class='group_count'>2</text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
						<text class='group_count'>6</text>
					</view>
					<!-- <text class='or'>Or</text> -->
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>2nd Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count'>1</text>
						<text class='group_count'>2</text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
						<text class='group_count empty_count'></text>
					</view>
					<text class='or'>Or</text>
					<view class='price_value_group'>
						<text class='group_count empty_count'></text>
						<text class='group_count'>2</text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
						<text class='group_count'>6</text>
					</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>3rd Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count'>1</text>
						<text class='group_count'>2</text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
					</view>
					<text class='or'>Or</text>
					<view class='price_value_group'>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count'>3</text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
						<text class='group_count'>6</text>
					</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>4th Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count'>1</text>
						<text class='group_count'>2</text>
						<text class='group_count'>3</text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
					</view>
					<text class='or'>Or</text>
					<view class='price_value_group'>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count'>4</text>
						<text class='group_count'>5</text>
						<text class='group_count'>6</text>
					</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>5th Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter'>
					<view class='price_value_group'>
						<text class='group_count'>1</text>
						<text class='group_count'>2</text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
					</view>
					<text class='or'>Or</text>
					<view class='price_value_group'>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count empty_count'></text>
						<text class='group_count'>5</text>
						<text class='group_count'>6</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import scoreHead from '@/components/scoreHead.vue';
	export default {
		components:{
			scoreHead
		},
		data() {
			return {
				statusBar:getApp().globalData.statusBar,
				pageTitle:getApp().globalData.pageTitle + 228, // 137
				
			};
		}
	}
</script>

<style lang="scss">
	.part{
		.part_content{
			.score{
				.scoreIcon{
					width:max-content;
					padding:0 28.5px;
					border-left:1px solid rgba(102, 102, 102, 0.1);
					image{
						width:50px;
					}
				}
				.plus{
					flex:1;
					text-align: center;
				}
				.scoreItemList{
					.scoreItem{
						width:97.5px;
						padding:10px 0;
						text-align: center;
						border-right:1px solid rgba(102, 102, 102, 0.1);
						border-bottom: 1px solid rgba(102, 102, 102, 0.1);
					}
					.scoreItem:last-child{
						border-bottom: none;
					}
				}
				.allScore{
					width:100%;
					padding:10px 0;
					text-align: center;
					border-top:1px solid rgba(102, 102, 102, 0.1);
				}
				width:calc(100% - 100px);
				height: 100%;
			}
			.gradeList{
				width:100px;
				.grade{
					width:100%;
					padding:10px 0;
					background:#000000;
					color:white;
					text-align: center;
				}
			}
			.part_content_value{
				width:100%;
				.price_value_group{
					display: inline-block;
					border-radius: 5px;
					.group_count{
						display: inline-block;
						width:25px;
						height: 30px;
						border-radius: 5px;
						text-align: center;
						line-height: 30px;
					}
					.empty_count{
						display: inline-block;
						vertical-align: bottom;
						background: rgb(0, 0, 0,0.5);
					}
				}
				.price_value_count{
					width:30px;
					height:30px;
					border: 1px solid #4dcd00;
					display:flex;
					justify-content: center;
					align-items: center;
					border-radius: 5px;
				}
				.price_value{
					text-align: center;
					padding: 10px 0;
					font-size:16px;
				}
			}
			.threeValue{.price_value{width:calc(100% / 3)}}
			.fiveValue{.price_value{width:calc(100% / 5)}}
			.part_content_title{
				.price_title_small{
					font-size:12px;
					text-align: center;
					padding-top: 10px;
				}
				.price_title{
					min-width:calc(100% / 3);
					text-align: center;
					padding: 10px 0;
				}
				background: #000000;
				color: #ffffff;
				width:100%;
			}
			width:100%;
		}
		.part_title{
			.part_title_icon{
				width:24px;
				height: 24px;
				border-radius: 50%;
				margin-right: 6px;
			}
			font-size: 18px;
			padding:12px 0;
			font-weight: bold;
			background: #FF0000;
			color: #ffffff;
		}
		width:calc(100% - 24px);
		margin:0 auto 12px;
		border-radius: 16px;
		overflow: hidden;
	}
	.five{
		.part_content{
			.part_content_title{
				
			}
			.part_content_value{
				
			}
		}
	}
	.four{
		.part_content{
			.part_content_value{
				padding:12px 0;
				.price_value_group{
					border: 1px solid #FF0000;
					.group_count{
						color:#4E2500;
					}
				}
				.price_value_count{
					border:1px solid #FF0000;
				}
				.price_value_count,
				.price_value{
					color:#582A00;
					padding:0;
				}
			}
		}
	}
	.three{
		.part_content{
			.part_content_value{
				padding:12px 0;
				.price_value_count{
					border:1px solid #FF0000;
				}
				.price_value_count,
				.price_value{
					color:#000000;
					padding:0;
				}
			}
		}
	}
	.two{
		.part_content{
			.part_content_value{
				.price_value{
					color:#000000;
				}
			}
		}
	}
	.kindList{
		.exchangeBtn{
			width:100%;
			padding:10px 0;
			text-align: center;
			border-top:1px solid white;
		}
		.u-grid{
			height:43px;
		}
		.u-grid-item{
			padding:5px 0;
		}
		color: white;
		font-size: 12px;
		background: linear-gradient(0deg,#290bad 0%, #9b01a1 100%), #520065;
	}
	.expand{
		.u-grid{
			height:auto;
			transition: height 5s ease;
		}
	}
	page{
		background:white;
	}
</style>
